<template>
  <el-tooltip :disabled="!tip" :key="prop" :content="tip">
    <el-button
      class="op-button"
      @click="buttonClick(prop)"
      :disabled="throttleDisabled || disabled"
      :size="size"
      v-bind="attrs"
    >
      <img v-if="src" :src="src" />
      <i v-if="fontClass" :class="fontClass"></i>
      <slot>
        {{ label }}
      </slot>
    </el-button>
  </el-tooltip>
</template>
<script setup>
import _ from 'lodash';
const attrs = useAttrs();

const emits = defineEmits(['buttonClick']);
const props = defineProps({
  tip: { type: String },
  prop: { type: String },
  src: { type: String },
  fontClass: { type: String },
  label: { type: String },
  size: { type: String, default: 'small' },
  disabled: { type: Boolean },
});

let throttleDisabled = ref(false);

const disabled = computed(() => {
  return attrs.disabledFn && _.isFunction(attrs.disabledFn)
    ? attrs.disabledFn(attrs)
    : props.disabled || false;
});

const buttonClick = prop => {
  throttleDisabled.value = true;
  emits('buttonClick', { prop });
  // 避免用户快速点击按钮
  setTimeout(() => {
    throttleDisabled.value = false;
  }, 1000);
};
</script>

<style lang="scss" scoped>
.op-button {
  i,
  img {
    margin-right: 4px;
  }
  .iconfont {
    font-size: 17px;
  }
}
</style>
